<template>
<v-container>
  <v-row class="green mt-n3">
    <v-col>
      <v-btn :to="{name:'home'}" class="mx-2" elevation=0 fab outlined x-small color="white">
        <v-icon color="white">mdi-keyboard-backspace</v-icon>
      </v-btn>
    </v-col>
    <v-col>
      <h3 class="d-flex justify-center">个 人 中 心</h3>
    </v-col>
    <v-col></v-col>
  </v-row>
  <!-- <v-row> -->
    <!-- 整个界面是一张卡片 -->
    <!-- <v-card height="630px" width="100%"> -->
    <!-- <v-card height="680px" width="100%"> -->

      <!-- card背景 -->
      <!-- <v-img height="100%" width="100%" src="../assets/个人中心背景图.jpg"> -->
      <!-- <v-img height="100%" width="100%" src="../assets/个人中心背景图第二选择.jpg"> -->
      <!-- container背景 -->
      <!-- <v-img height="630px" width="100%" src="../assets/个人中心背景图.jpg"> -->
      <!-- <v-img height="630px" width="100%" src="../assets/个人中心背景图第二选择.jpg"> -->
        
        <!-- 头像+个签+姓名 -->
        <v-row>
          <v-col cols="1"></v-col>
          <v-col cols="4">
            <v-avatar color="grey" size="100">
              <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
            </v-avatar>
          </v-col>
          <v-col cols="7" class="py-6">
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title class="title">张小明/小明</v-list-item-title>
                <v-list-item-subtitle>个性签名</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-col>
        </v-row>
        
<!-- <v-divider class="red"></v-divider> -->
<!-- <br> -->

        <!-- 地址管理+收藏+优惠券（窄） -->
        <v-container>
        <v-row>
          <v-col cols="1"></v-col>
          <v-col cols="3">
            <v-row class="justify-center"><v-icon size="40">mdi-map-marker</v-icon></v-row>
            <v-row class="justify-center"><span style="color:black">地址管理</span></v-row>
          </v-col>
          <v-col cols="1"></v-col>
          <v-col cols="2">
            <v-row class="justify-center"><v-icon size="40">mdi-heart</v-icon></v-row>
            <v-row class="justify-center"><span style="color:black">收藏</span></v-row>
          </v-col>
          <v-col cols="1"></v-col>
          <v-col cols="3">
            <router-link :to="{name:'Recommend'}" style="text-decoration:none">
            <v-row class="justify-center"><v-icon size="40">local_activity</v-icon></v-row>
            <v-row class="justify-center"><span style="color:black">优惠券</span></v-row>
            </router-link>
          </v-col>
          <v-col cols="1"></v-col>
        </v-row>
        </v-container>
        <!-- 地址管理+收藏+优惠券（宽） -->
        <!-- <v-row>
          <v-col cols="1"></v-col>
          <v-col cols="2">
            <v-row class="justify-center"><v-icon size="40">mdi-heart</v-icon></v-row>
            <v-row class="justify-center"><span>地址管理</span></v-row>
          </v-col>
          <v-col cols="2"></v-col>
          <v-col cols="2">
            <v-row class="justify-center"><v-icon size="40">mdi-heart</v-icon></v-row>
            <v-row class="justify-center"><span>收藏</span></v-row>
          </v-col>
          <v-col cols="2"></v-col>
          <v-col cols="2">
            <v-row class="justify-center"><v-icon size="40">mdi-twitter</v-icon></v-row>
            <v-row class="justify-center"><span>优惠券</span></v-row>
          </v-col>
          <v-col cols="1"></v-col>
        </v-row> -->

<!-- <br> -->

        <!-- 订单管理 -->
        <v-container>
        <v-row>
          <v-card class="mx-auto blue-grey lighten-5"  width="100%">
            <v-card-title>
              <span class="title font-weight-thin">订单管理</span>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-spacer></v-spacer>
              <v-row class="font-italic" align="center">
                查看更多 >
              </v-row>
            </v-card-title>

<v-divider></v-divider>

            <v-row class="justify-center">
              <v-col cols="2">
                <v-row class="justify-center"><v-icon size="30">local_atm</v-icon></v-row>
                <v-row class="justify-center"><h4 class="font-weight-light">待付款</h4></v-row>
              </v-col>
              <v-col cols="1"></v-col>
              <v-col cols="2">
                <v-row class="justify-center"><v-icon size="30">gradient</v-icon></v-row>
                <v-row class="justify-center"><h4 class="font-weight-light">待发货</h4></v-row>
              </v-col>
              <v-col cols="1"></v-col>
              <v-col cols="2">
                <v-row class="justify-center"><v-icon size="30">local_shipping</v-icon></v-row>
                <v-row class="justify-center"><h4 class="font-weight-light">待收货</h4></v-row>
              </v-col>
              <v-col cols="1"></v-col>
              <v-col cols="2">
                <v-row class="justify-center"><v-icon size="30">thumb_up</v-icon></v-row>
                <v-row class="justify-center"><h4 class="font-weight-light">待评价</h4></v-row>
              </v-col>
            </v-row> 
          </v-card>
        </v-row>
        <!-- <v-row>
          <v-col cols="2"><v-icon size="30">grade</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">speaker_notes</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">rate_review</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">sync</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">refresh</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">gradient</v-icon></v-col>
        </v-row>
        <v-row>
          <v-col cols="2"><v-icon size="30">money</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">local_atm</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">local_activity</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">favorite</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">favorite_border</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">ac_unit</v-icon></v-col>
        </v-row>
        <v-row>
          <v-col cols="2"><v-icon size="30">wb_sunny</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">wb_cloudy</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">toys</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">flash_on</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">brightness_2</v-icon></v-col>
          <v-col cols="2"><v-icon size="30">brightness_3</v-icon></v-col>
        </v-row> -->
        </v-container>
      <!-- </v-img> -->
    <!-- </v-card> -->
  <!-- </v-row> -->

  <v-bottom-navigation style="position:fixed;" :value="activeBtn" grow color="teal">
      <v-btn :to="{name:'Mall'}" bottom>
        <span>首页</span>
        <v-icon>home</v-icon>
      </v-btn>
      <v-btn :to="{name:'Classify'}">
        <span>分类</span>
        <v-icon>widgets</v-icon>
      </v-btn>
      <v-btn :to="{name:'Myself'}">
        <span>我的</span>
        <v-icon>person</v-icon>
      </v-btn>
    </v-bottom-navigation>

</v-container>
</template>

<script>
export default {
  data () {
    return {
      activeBtn: 2,
    }
  },
}
</script>